<template>
  <div class="room-lighting">
    <div class="search-wrap">
      <el-form :inline="true" :model="params">
        <el-row>
          <el-form-item label="楼宇选择">
            <el-select
              class="sel-width"
              v-model="value"
              placeholder="请选择"
              clearbaler
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              class="two-sel-width"
              v-model="value"
              placeholder="请选择"
              clearbaler
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item class="device-witdh" label="照明状态">
            <el-select
              class="lamp-width"
              v-model="value"
              placeholder="请选择"
              clearbaler
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="房间号">
            <el-input
              v-model="params.fd"
              clearable
              class="ipt-width"
              placeholder="请输入房间号"
            ></el-input>
          </el-form-item>

          <div class="btn-wrap">
            <el-button :icon="Search" type="primary" @click="getList"
              >查询</el-button
            >
          </div>
        </el-row>
      </el-form>
    </div>
    <ul class="ul">
      <li v-for="item in 12">
        <div class="name-status">
          <span>女生宿舍楼1-203</span>
          <!--  -->
          <div class="status lixian baojing zaixian guzhang">离线</div>
        </div>
        <img src="../images/dengpao.png" alt="" class="lamp" />
        <div class="adjust">
          <span>调节亮度</span>
          <el-button>详情</el-button>
        </div>
        <div class="silder"><el-slider v-model="value1" /></div>
        <div class="switch table-data">
          <span>单控开关</span>
          <el-switch
            v-model="value1"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
        </div>
      </li>
    </ul>
    <div class="pagination">
      <Pagination
        v-model:currentPage="params.currentPage"
        :total="total"
        layout="total,prev, pager, next, jumper"
        v-model:page-size="params.pageSize"
      />
    </div>
    <Dialog
      v-model:showDialog="showDialog"
      :diaWidth="54"
      :diaTop="30"
      headerName="详情"
      :footerShow="false"
    >
      <template #content>
        <ul class="dia-content">
          <li>
            <div class="item">
              <div class="name">路灯名称</div>
              <div class="val">A区篮球场1号杆</div>
            </div>
            <div class="item">
              <div class="name">路灯编号</div>
              <div class="val">12345467890</div>
            </div>
          </li>
          <li>
            <div class="item">
              <div class="name">所属位置</div>
              <div class="val">A区篮球场</div>
            </div>
            <div class="item">
              <div class="name">所属变压器</div>
              <div class="val">bt1变</div>
            </div>
          </li>
          <li>
            <div class="item">
              <div class="name">所属出线柜</div>
              <div class="val">001</div>
            </div>
            <div class="item">
              <div class="name">所属变压器</div>
              <div class="val">在线</div>
            </div>
          </li>
          <li>
            <div class="item">
              <div class="name">设备状态</div>
              <div class="val">在线</div>
            </div>
            <div class="item">
              <div class="name">单控开关</div>
              <div class="val">开</div>
            </div>
          </li>
        </ul>
      </template>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
let params = reactive({});
let value1 = ref("");
let showDialog =ref(false)
let total = ref(1);
</script>
<style lang="scss" scoped>
.room-lighting {
  width: 100%;
  height: 100%;
  margin-top: 21px;
  height: calc(100vh - 21px - 50px - 20px);
  background-color: #022655;
  padding-top: 15px;
  .dia-content {
    display: flex;
    flex-direction: column;
    padding: 10px 0 20px 0;
    li {
      display: flex;
      align-items: center;
      margin-top: 24px;
      justify-content: space-around;
      .item {
        display: flex;
        align-items: center;
        .name {
          width: 100px;
          text-align: right;
          margin-right: 17px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
        }
        .val {
          width: 325px;
          height: 35px;
          background: rgba(4, 68, 131, 0);
          border: 1px solid #1e5480;

          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          line-height: 35px;
          padding-left: 60px;
        }
      }
    }
  }
  .search-wrap {
    padding-left: 32px;
    padding-top: 8px;
    span {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
    }
    .ipt-width {
      width: 220px;
    }
    .two-sel-width {
      width: 200px;
      margin-left: 12px;
    }
    .lamp-width {
      width: 220px;
    }
    .sel-width {
      width: 260px;
    }
    .del-btn {
      display: flex;
      align-items: center;
      width: 81px;
      height: 35px;
      background: rgba(133, 18, 20, 0.4);
      border: 1px solid #ff2222;

      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #fefefe;
      padding-left: 11px;
      margin-left: 17px;
      img {
        width: 15px;
        height: 17px;
        margin-right: 7px;
      }
    }
    .btn-wrap {
      display: flex;
      align-items: center;
    }

    :deep(.el-col.el-col-1.is-guttered) {
      padding-left: 0px !important;
    }
    :deep(.el-date-editor) {
      width: 300px !important;
    }

    :deep(.el-form-item) {
      margin-bottom: 0px;
    }
    :deep(.el-button) {
      width: 84px;
      height: 35px;
      background: rgba(27, 168, 255, 0.35);
      border: 1px solid #61c8ff;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #fefefe;
      border-radius: 0px;

      svg {
        width: 50px !important;
        height: 17px !important;
      }
    }
  }
  .pagination {
    padding-right: 40px;
    padding-top: 18px;
  }
  .ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 34px 0 27px;
    justify-content: space-between;
    li {
      width: 242px;
      margin-top: 23px;
      height: 259px;
      background: #022456;
      border: 1px solid #61c8ff;
      padding: 16px 14px 0 14px;

      .name-status {
        display: flex;
        align-items: center;
        padding-left: 5px;
        justify-content: space-between;
        margin-bottom: 24px;
        span {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
        }
        .status {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #fffefe;
          width: 47px;
          height: 24px;
          background: url("../images/baojing.png") no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: 24px;
        }
        .lixian {
          background: url("../images/lixian.png");
        }
        .baojing {
          background: url("../images/baojing.png");
        }
        .zaixian {
          background: url("../images/zaixian.png");
        }
        .guzhang {
          background: url("../images/guzhang.png");
        }
      }
      .lamp {
        width: 63px;
        height: 61px;
        margin-top: 22px;
        display: flex;
        margin: 0 auto;
      }
      :deep(.el-slider__button.el-tooltip__trigger.el-tooltip__trigger) {
        width: 14px;
        height: 14px;
      }
      .adjust {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        padding-right: 13px;
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #fefefe;
        }
        :deep(.el-button) {
          width: 67px;
          height: 27px;
          background: rgba(27, 168, 255, 0.35);
          border: 1px solid #61c8ff;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
          border-radius: 0px;

          svg {
            width: 50px !important;
            height: 17px !important;
          }
        }
      }
      .silder {
        padding-left: 8px;
        margin-top: 6px;
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #fefefe;
        }
      }
      .switch {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #fefefe;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 16px;
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #fefefe;
        }
      }
    }
  }
}
</style>
